<template>
  <div class="review-list">
    <el-empty v-show="!tableData.length" description="暂无笔记"></el-empty>
    <div class="review-item" v-for="item in tableData" :key="item.id">
      <div class="review-user">
        <el-avatar size="small" :src="headImg(item.sysUser)"></el-avatar>
        {{ item.sysUser.userName }}
      </div>
      <div class="review-content">
        <p v-show="current.id != item.id">{{ item.content }}</p>
      </div>
      <div class="review-info" v-show="current.id != item.id">
        <el-row :gutter="20">
          <el-col :span="12" class="review-info-left">
            <span>{{ item.createTime }}</span>
          </el-col>
          <el-col :span="12" class="review-btns">
            <span class="el-icon-delete" @click="handleDelete(item)">
              删除</span
            >
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>
<script>
import setInfo from '@/mixins/setInfo'
export default {
  mixins: [setInfo],
  data() {
    return {
      current: {},
      listQuery: {
        page: 1,
        limit: 100,
        pid: '0',
        resId: '', //章节id
        resType: '2', //资源类型（1-章）
        type: '1',
        createBy: '',
      },
      tableData: [],
    }
  },
  watch: {
    $route: {
      immediate: true,
      handler() {
        this.getList()
      },
    },
  },
  mounted() {
    this.$bus.$on('getMyReviewList', () => {
      this.getList()
    })
  },
  beforeDestroy() {
    this.$bus.$off('getMyReviewList')
  },
  methods: {
    async getList() {
      let userId = this.$store.getters.userId
      this.listQuery.createBy = userId
      let { cId } = this.$route.query
      this.listQuery.resId = cId
      let res = await this.$store.dispatch('querySysEvaluate', this.listQuery)
      this.tableData = res.data
    },
    //删除
    handleDelete(row) {
      this.deleteTips(() => {
        this.delete(row)
      })
    },
    async delete(row) {
      await this.$store.dispatch('deleteSysEvaluate', row.id)
      this.getList()
      this.$bus.$emit('refreshAllReviewList')
    },
  },
}
</script>
<style scoped lang="scss">
.review-list {
  .review-item {
    padding: 10px 0;
    border-bottom: 1px dashed #eee;
    &:last-child {
      border-bottom: 0 none;
    }
    .review-user {
      font-size: 14px;
      color: #666;
      height: 28px;
      line-height: 28px;
      span {
        float: left;
        margin-right: 10px;
      }
    }
    .review-content {
      color: #333;
      padding: 10px 0;
      line-height: 22px;
      text-align: justify;
    }
    .review-info {
      .review-info-left {
        span {
          color: #9199a1;
          margin-right: 10px;
        }
      }
      .review-btns {
        text-align: right;
        span {
          color: #717a84;
          margin-left: 10px;
          cursor: pointer;
          &:hover {
            color: #444;
          }
        }
      }
    }
  }
}
</style>